<template>
    <div class="main">
        <section>
          <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
          <el-button style=" margin-bottom: 10px" type="success" :loading="exportOrderLoading" v-if="rightsButtons['export']" @click="exportOrder">导出</el-button>
          <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
              <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
              </el-table-column>
              <el-table-column align="center" label="ERP订单号" width="130">
                  <template slot-scope="scope">
                      <span>{{scope.row.orderSn}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="订单号" width="210">
                  <template slot-scope="scope">
                      <span>{{scope.row.dealCode}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="商家名称" prop="merchantName" min-width="160"></el-table-column>
              <!--<el-table-column align="center" label="原单号" width="210">
                  <template slot-scope="scope">
                      <span>{{scope.row.splitOrders || '-'}}</span>
                  </template>
              </el-table-column>-->
              <el-table-column align="center" label="金额" width="90">
                  <template slot-scope="scope">
                      <span>{{scope.row.payment||0}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="收货人" width="100">
                  <template slot-scope="scope">
                      <span>{{scope.row.receiverName}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="手机号" width="110">
                  <template slot-scope="scope">
                      {{scope.row.receiverMobile}}
                  </template>
              </el-table-column>
              <el-table-column align="center" label="收货地址" min-width="160">
                  <template slot-scope="scope">
                      <span>{{scope.row.receiverAddress}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="发货状态" width="80">
                  <template slot-scope="scope">
                      <span v-if="scope.row.shippingStatus < 6">待发货</span>
                      <span v-else>已发货</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="创建时间" width="100">
                  <template slot-scope="scope">
                      <span>{{scope.row.createTime}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="发货时间" width="100">
                  <template slot-scope="scope">
                      <span>{{scope.row.shippingTimeFh}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="快递单号" min-width="120">
                  <template slot-scope="scope">
                      <span>{{scope.row.shippingSn||'-'}}</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="80" fixed="right" v-if="rightsButtons['detail']">
                  <template slot-scope="scope">
                      <router-link :to="{name: 'merchantOrderDetail', params: {merchantId: scope.row.merchantId, id: scope.row.orderSn}}">
                          <el-button type="primary" size="mini" plain>查看</el-button>
                      </router-link>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination
            v-if="paginationShow"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.pageIndex"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="listQuery.pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal">
          </el-pagination>
        </section>
    </div>
</template>
<script>
  import searchForm from '../../../components/searchForm/index'
  import moment from 'moment'
  export default {
    name: 'merchantOrder',
    components: {
      searchForm
    },
    data () {
      return {
        listQuery: {
          merchantId: '',
          orderSn: '',
          dealCode: '',
          // splitOrders: '',
          createStart: '',
          createEnd: '',
          sendStart: '',
          sendEnd: '',
          receiverName: '',
          receiverMobile: '',
          // receiverAddress: '',
          // goodsSn: '',
          shippingStatus: '',

          createDate: [],
          sendDate: [],
          pageIndex: 1,
          pageSize: 10
        },
        queryConfig: [
          {
            prop: 'merchantId',
            type: 'select',
            label: '商家名称',
            data: []
          },
          {
            prop: 'orderSn',
            type: 'input',
            label: 'ERP订单号'
          },
          {
            prop: 'dealCode',
            type: 'input',
            label: '订单号'
          },
          /* {
            prop: 'splitOrders',
            type: 'input',
            label: '原单号'
          }, */
          {
            prop: 'createDate',
            type: 'daterange',
            label: '创建时间'
          },
          {
            prop: 'sendDate',
            type: 'daterange',
            label: '发货时间'
          },
          {
            prop: 'receiverName',
            type: 'input',
            label: '收货人'
          },
          {
            prop: 'receiverMobile',
            type: 'input',
            label: '收货手机号'
          },
          {
            prop: 'shippingStatus',
            type: 'select',
            label: '发货状态',
            data: [
              {
                label: '待发货',
                value: 0
              },
              {
                label: '已发货',
                value: 1
              }
            ]
          }
        ],
        listLoading: true,
        listTotal: 0,
        list: [],
        paginationShow: false,
        exportOrderLoading: false
      }
    },
    mounted(){
      this.listQuery = this.getLocalQuery(this.listQuery, 'merchantOrder');
      this.getList();
      this.getMerchantList();
    },
    methods: {
      exportOrder () {
        this.listQuery.pageIndex = 1
        this.exportOrderLoading = true
        this.request({
          url: '/merchant/orderInfo/toExportSelect',
          method: 'post',
          data: {
            offset: this.listQuery.pageIndex,
            limit: this.listQuery.pageSize,
            ...this.listQuery,
          },
          responseType: 'arraybuffer'
        }).then((data) => {
          let date = moment().format('YYYYMMDD/HHmmss').replace(/\//g, '_')
          let filename = `订单${date}.xls`
          this.downloadFile(data, filename)
          this.exportOrderLoading = false
        }).catch(err => {
          console.log(err)
          this.exportOrderLoading = false
        })
      },
      getList(){
        this.listLoading = true;
        this.setLocalQuery(this.listQuery, 'merchantOrder');
        this.request({
          url: '/merchant/orderInfo/manager/list',
          method: 'post',
          data: this.listQuery
        }).then(({data, totalCount}) => {
          this.list = data.viewList;
          this.listTotal = totalCount;
          this.listLoading = false;
          this.paginationShow = true
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
          this.paginationShow = true
        });
      },
      getMerchantList(){
        this.request({
          url: '/merchant/info/ck/all/2',
          method: 'get',
          params: {}
        }).then(({data}) => {
          this.queryConfig[0].data = data.viewList.map(item => {
            return {
              label: item.merchantName,
              value: item.ckdm
            }
          });
        }).catch(err => {
          console.log(err);
          this.queryConfig[0].data = [];
        });
      },
      search () {
        this.listQuery.pageIndex = 1;
        this.getList();
      },
      handleSizeChange (value) {
        this.listQuery.pageSize = value;
        this.getList();
      },
      handleCurrentChange (value) {
        this.listQuery.pageIndex = value;
        this.getList();
      }
    }
  }
</script>
